<template>
  <div class="admin_menus">
      <Tree :data="data5" :render="renderContent" class="demo-tree-render"></Tree>
      <Modal v-model="removeFlag" width="360">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>删除提醒</span>
        </p>
        <div style="text-align:center">
            <p>您真的要删除这条菜单吗?</p>
        </div>
        <div slot="footer">
            <Button type="error" size="large" long :loading="modal_loading" @click="del">删除</Button>
        </div>
      </Modal>
      <Modal
        width='400px'
        v-model="addFlag"
        :title="isFix?'修改菜单':'添加菜单'"
        @on-ok="modalSubmit"
        @on-cancel="addFlag=false">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90">
          <FormItem label="父菜单Id" prop="mpid">
              <Input v-model="formValidate.mpid" disabled placeholder="上一级菜单id" ></Input>
          </FormItem>
          <FormItem label="路由名称" prop="name" >
              <Input v-model="formValidate.name" :disabled="formValidate.mpid==0" placeholder="路由名称" ></Input>
          </FormItem>
          <FormItem label="路由icon" prop="type" >
              <Input v-model="formValidate.type" placeholder="路由icon" ></Input>
              <a  class="tip" target="_blank" href="http://v1.iviewui.com/components/icon">图标库地址，点这里找icon。</a>
          </FormItem>
          <FormItem label="内容字号" prop="size" >
              <Input v-model="formValidate.size" placeholder="内容字号" ></Input>
          </FormItem>
          <FormItem label="菜单名称" prop="text">
              <Input v-model="formValidate.text" placeholder="菜单名称"></Input>
          </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
  import conf from '@/api/apiConf'
  export default {
    data () {
      return {
        modal_loading:false,
        removeFlag:false,
        addFlag:false,
        isFix:true,
        formValidate:{
            mpid:'',
            name:'',
            type:'',
            size:18,
            text:''
        },
        ruleValidate: {
            pId: [
                { required: true, message: '菜单父级id不能为空', trigger: 'blur' }
            ],
            name: [
                { required: true, message: '路由名称不能为空', trigger: 'blur' }
            ],
            type: [
                { required: true, message: '图标类型不能为空', trigger: 'blur' }
            ],
            mName: [
                { required: true, message: '菜单名不能为空', trigger: 'blur' }
            ],
    },
        addData:{},
        removeData:{
            root:null,
            node:null,
            data:null
        },
        data5: [
          {
              title: 'mogu admin menus',
              expand: true,
              render: (h, { root, node, data }) => {
                  return h('span', {
                      style: {
                          display: 'inline-block',
                          width: '100%'
                      }
                  }, [
                      h('span', [
                          h('Icon', {
                              props: {
                                  type: 'ios-folder-outline'
                              },
                              style: {
                                  marginRight: '8px'
                              }
                          }),
                          h('span', data.title)
                      ]),
                      h('span', {
                          style: {
                              display: 'inline-block',
                              float: 'right',
                              marginRight: '32px'
                          }
                      }, [
                          h('Button', {
                              props: Object.assign({}, this.buttonProps, {
                                  icon: 'ios-add',
                                  type: 'success'
                              }),
                              style: {
                                  width: '64px'
                              },
                              on: {
                                  click: () => {
                                      this.isFix=false
                                      this.addFlag=true
                                      this.addData=data 
                                      this.formValidate={
                                        mpid:0,
                                        name:null,
                                        type:'',
                                        size:18,
                                        text:''
                                     }
                                    }
                              }
                          })
                      ])
                  ]);
              },
              children: []
          }
        ],
        buttonProps: {
            type: 'success',
            size: 'small',
        }
      }
    },
    watch:{
        data5:{
            deep:true,
            handler:()=>{

            }
        }
    },
    methods: {
      renderContent (h, { root, node, data }) {
          return h('span', {
              style: {
                  display: 'inline-block',
                  width: '100%'
              }
          }, [
              h('span', [
                  h('Icon', {
                      props: {
                          type: data.type
                      },
                      style: {
                          marginRight: '8px'
                      }
                  }),
                  h('span', data.title)
              ]),
              h('span', {
                  style: {
                      display: 'inline-block',
                      float: 'right',
                      marginRight: '32px'
                  }
              }, [
                 h('Button', {
                      props: Object.assign({}, this.buttonProps, {
                          icon: 'ios-add',
                          disabled:data.disabled
                      }),
                      style: {
                          marginRight: '8px'
                      },
                      on: {
                          click: () => { 
                            this.isFix=false
                            this.addFlag=true
                            this.addData=data 
                            this.formValidate={
                                mpid:data.m_Id,
                                name:'',
                                type:'',
                                size:18,
                                text:''
                            }
                           }
                      }
                  }),
                 h('Button', {
                      props: Object.assign({}, this.buttonProps, {
                          icon: 'md-create',
                          type:'primary'
                      }),
                      style: {
                          marginRight: '8px'
                      },
                      on: {
                          click: () => { 
                            this.isFix=true
                            this.addFlag=true
                            this.addData=data
                            console.log(data);
                            this.formValidate={
                                mid:data.m_Id,
                                mpid:data.m_PId,
                                name:data.name,
                                type:data.type,
                                size:data.size,
                                text:data.text
                            }
                          }
                       }
                  }),
                 h('Button', {
                      props: Object.assign({}, this.buttonProps, {
                          icon: 'ios-remove',
                          type:'error'
                      }),
                      on: {
                          click: () => { 
                            this.removeFlag = true
                            this.removeData={
                                root,
                                node,
                                data
                            }
                          }
                       }
                  }),
                  
              ])
          ]);
      },
     async del () {
        this.modal_loading = true;
         const { data } = await this.$http.post(conf.deleteMenus,{mid:this.removeData.data.m_Id});
           if(data.status==200){
             this.$Message.info('删除成功')
             this.search()
            }else{
                this.$Message.info('删除失败')
            }
            this.modal_loading = false;
            this.removeFlag = false;
      },
      async modalSubmit(){
          if(this.inspectKey(this.formValidate)) return
          var apiUrl=''
          if(this.isFix){
              apiUrl=conf.updateMenus
          }else{
              apiUrl=conf.addMenus
          }
         const { data } = await this.$http.post(apiUrl,this.formValidate);
           if(data.status==200){
             this.data5[0].children=data.data
             this.search()
            }else{
                this.$Message.info('查询失败')
            }
      },
      async search(){
           const { data } = await this.$http.get(conf.getMenus);
           console.log(data);
           if(data.status==200){
             this.data5[0].children=data.data
            }else{
                this.$Message.info('查询失败')
            }

      },
      inspectKey(obj){
          let errKey='',flag=false
          for (const key in obj) {
              if (Object.hasOwnProperty.call(obj, key)) {
                  if(!obj[key]) {
                      flag=true
                      errKey=key
                  }
              }
          }
          this.$Message.info('不填字段不能为空')
          return flag
      }
    },
    created() {
     this.search()
     console.log(this.data5);
   },
  }
</script>
<style lang="less" scoped>
.admin_menus{
    width: 400px;
    .demo-tree-render .ivu-tree-title{
        width: 100%;
    }
}
.tip{
    font-size: 12px;
}
</style>